<!DOCTYPE html>
<html>
<head>                                        <!-- Please copy the following files into here: -->
<script src="./Long.min.js"></script>         <!-- https://raw.github.com/dcodeIO/Long.js/master/dist/Long.min.js -->
<script src="./ByteBufferAB.min.js"></script> <!-- https://raw.github.com/dcodeIO/ByteBuffer.js/master/dist/ByteBufferAB.min.js -->
<script src="./ProtoBuf.min.js"></script>     <!-- https://raw.github.com/dcodeIO/ProtoBuf.js/master/dist/ProtoBuf.min.js -->
<script>
if (typeof dcodeIO === 'undefined' || !dcodeIO.ProtoBuf) {
    throw(new Error("ProtoBuf.js is not present. Please see www/index.html for manual setup instructions."));
}
// Initialize ProtoBuf.js
var ProtoBuf = dcodeIO.ProtoBuf;
var builder = ProtoBuf.loadProtoFile("./api.proto")
console.log("Builder is " + builder)
var Request = builder.build("iterm2.Request");
var Response = builder.build("iterm2.Response");
</script>
</head>
<body>
<div style="display:flex; flex-direction: column; align-items: stretch; height: 100vh; width: 100hw">
<div style="display:flex; flex-direction: row; align-items: stretch; flex-grow: 1">
  <div style="flex-grow: 3">
        <textarea id="log" style="width:100%; height:100%"></textarea>
  </div>
  <div style="min-width: 10px"></div>
  <div style="flex-grow: 1">
    <div style="display:flex; flex-direction: column; align-items: stretch'.
      <div style="min-height: 400px;">
        <textarea type="text" id="text" style="width: 100%; height: 400px">
{
  "id": 1,
  "get_buffer_request": {
    "line_range": {
      "screen_contents_only": true
    }
  }
}
        </textarea>
      </div>
      <div>
        <button onclick="send()">Send</button>
      </div>
      <div style="flex-grow: 1; overflow-y: scroll">
Sample requests:
<pre>
{
  "id": 1,
  "get_buffer_request": {
    "line_range": {
      "screen_contents_only": true
    }
  }
}

{
  "id": 1,
  "get_prompt_request": {
  }
}

{
  "id": 1,
  "transaction_request": { "begin": true }
}

{
  "id": 1,
  "transaction_request": { "begin": false }
}

{
  "id": 1,
  "register_tool_request": {
    "identifier": "com.iterm2.mytool",
    "name": "Wikipedia",
    "url": "https://en.wikipedia.org/"
  }
}

{
  "id": 1,
  "set_profile_property_request": {
    "key": "Badge Color",
     "json_value": "{\"Red Component\": 1, \"Green Component\": 0, \"Blue Component\": 0, \"Alpha Component\": 1}"
  }
}

// Keystroke
{
  "id": 1,
  "notification_request": { "subscribe": true, "notification_type": 1 }
}

// Screen update
{
  "id": 1,
  "notification_request": { "subscribe": true, "notification_type": 2 }
}

// Prompt
{
  "id": 1,
  "notification_request": { "subscribe": true, "notification_type": 3 }
}

// Location change
{
  "id": 1,
  "notification_request": { "subscribe": true, "notification_type": 4 }
}

</pre>
      </div>

  </div>
</div>

<div style="height:20pt"></div>
</div>


<script>
var log = document.getElementById("log");
var text = document.getElementById("text");

// Connect to our server: node server.js
var socket = new WebSocket("ws://localhost:1912/", "api.iterm2.com");
socket.binaryType = "arraybuffer"; // We are talking binary

function send() {
    if (socket.readyState == WebSocket.OPEN) {
      console.log(text.value)
      var msg = new Request(JSON.parse(text.value));
        socket.send(msg.toArrayBuffer());
        log.value += "Sent " + text.value + "\n";
    } else {
        log.value += "Not connected\n";
    }
}

socket.onopen = function() {
    log.value += "Connected\n";
};

socket.onclose = function() {
    log.value += "Disconnected\n";
};
    
socket.onmessage = function(evt) {
    try {
        // Decode the Response
        var msg = Response.decode(evt.data);
        log.value += "Received: "+JSON.stringify(JSON.parse(msg.encodeJSON(msg)), null, 2)+"\n";
    } catch (err) {
        log.value += "Error: "+err+"\n";
    }
};

log.value = ""; // Clear log on reload
</script>
</body>
</html>
